<!--
 * @description  : 案件-二维码协同办案
 * @descriptionDetail: 案件-二维码协同办案
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-08-25 15:43:11
-->
<template>
  <view class="page">
    <view class="content content-bg" style="height: 100%;padding: 0;">
      <!-- 正文内容 -->
      <view class="u-coll-box">
        <view class="u-coll-content">
          <view class="u-coll-top">
            <view class="base-info">
              <view class="mini-title">
                案件编号
              </view>
              <view class="case-code-lay">
                <view class="case-code">
                  {{ getFiledsName(baseInfo.caseCode ) }}
                </view>
              </view>
              <view class="reason-lay">
                <view>发案时间：</view>
                <view>{{ getFiledsName(baseInfo.caseDate) }}</view>
              </view>
              <view class="reason-lay">
                <view>承办人：</view>
                <view>{{ getFiledsName(baseInfo.undertaker) }}</view>
              </view>
              <view class="reason-lay">
                <view>当前协办人：</view>
                <view>{{ getFiledsName(baseInfo.cooperatePsrNames) }}</view>
              </view>
            </view>
          </view>
          <view class="u-coll-gap">
          </view>
          <view class="u-coll-bottom">
            <u-image width="400rpx" height="400rpx" :src="imgData"></u-image>
            <view class="u-coll-text">
              凭此二维码协同办案
            </view>
          </view>
        </view>
      </view>
  
      <!-- 返回按钮 -->
      <view class="bottom-btn">
        <u-image width="78rpx" height="78rpx" src="/static/case/icon_close.png" @click="closeBack"></u-image>
      </view>
    </view>
  </view>
</template>

<script>
import QRCode from 'qrcode';
import caseService from '@/service/case/case.service.js';
export default{
  onLoad() {
    let param = this.getRouteParam();
    if(param){
      this.objMerge(this.baseInfo, param);
    }
  },
  data() {
    return {
      imgData:"",
      baseInfo:{},
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    getFiledsName(fileds){
      return this.$u.test.isEmpty(fileds) ? '未录入' : fileds;
    },
    init(){
      // from = caseOrganized   表示来源是扫码来源 验证是否是
      let url = location.origin + location.pathname + `?path=pages/dashboard/dashboard&from=caseOrganized&caseUuid=${this.baseInfo.caseUuid}&caseCode=${this.baseInfo.caseCode}`;
      QRCode.toDataURL(url)
        .then(path => {
          this.imgData = path;
        }).catch(err => {
          this.$u.toast(err);
        });
    },
    closeBack(){
      uni.navigateBack();
    },
  },
}
</script>

<style lang="scss" scoped>
	@import "../case_common.scss";
  uni-page-body{
    height: 100%;
  }
  .u-coll-box{
    background: url(../../../static/case/coll_backgr.png) top no-repeat;
    background-size: contain;
    background-color: #f3f4f6;
    padding-bottom: 40rpx;
    padding-top:30%;
  }
  .u-coll-content{
    width:90%; 
    margin:auto;
    background: #fff;
    position: relative;
    border-radius: 18rpx;
    &::after{
    position: absolute;
    content: "";
    width:20px;
    height: 20px;
    background: #f3f4f6;
    border-radius: 100%;
    right:0;
    // top:50%;
    bottom: 185px;
    transform: translate(50%,-50%);
  }
  &::before{
    position: absolute;
    content: "";
    width:20px;
    height: 20px;
    background: #f3f4f6;
    border-radius: 100%;
    left:0;
    // top:50%;
    bottom: 185px;
    transform: translate(-50%,-50%);
  }
  .u-coll-gap{
    border-bottom: 2px dashed #DDDDDD;
    width: 90%;
    margin: auto;
    // left: 5%;
    // position: absolute;
    // top: 50%;
  }
  .u-coll-bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20rpx;
    .u-coll-text{
      font-size: 13px;
      font-weight: bold;
      color: #666666;
    }
  }
}
.bottom-btn{
  display: flex;
  justify-content: center;
  // margin: 20px auto;
  padding:10px;
  height: 150rpx;
  background: #f3f4f6;
}
  
  .base-info {
		padding: 30rpx 30rpx;
		min-height: 200rpx;
	}

	.mini-title {
		color: #999999;
		font-size: .6rem;
		margin: 10rpx;
	}

	.case-code-lay {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx;
	}

	.case-code {
		color: #333333;
		font-size: 1.2rem;
		padding: 5rpx 0rpx;
		font-weight: bold;
	}

	.addr-lay {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: top;
		margin: 20rpx 0rpx;

		view {
			padding: 10rpx 15rpx;
			font-size: .7rem;
			background-color: #f2f2f2;
			color: #565656;
			margin: 3rpx 5rpx;
			border-radius: 10rpx;
		}
	}

	.reason-lay {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: top;
		margin: 20rpx 0rpx;
		font-size: .7rem;
		color: #565656;

		view:first-child {
			color: #999999;
		}
	}
</style>
